<div nz-row class="form-buttons">
  <div nz-col nzFlex="1">
    <nz-input-group nzSearch nzSize="default">
      <input
        class="search-input"
        type="text"
        nz-input
        placeholder="输入用户名、姓名查询"
        [(ngModel)]="listService.filter"
      />
    </nz-input-group>
  </div>
</div>
<div nz-row class="form-list" style="margin-bottom: 10px">
  <nz-list nzBordered nzSize="small">
    <nz-list-header>
      <div nz-row>
        <div nz-col nzFlex="0 0 40px"></div>
        <div nz-col nzFlex="1">用户名</div>
        <div nz-col nzFlex="1">姓名</div>
        <div nz-col nzFlex="1">邮箱</div>
        <div nz-col nzFlex="1">电话</div>
      </div>
    </nz-list-header>
    <nz-list-item
      *ngFor="let item of models; trackBy: trackByFn"
      [ngClass]="{ 'list-item-selected': isModelSelected(item) }"
      (click)="setCurrentModel(item)"
      (dblclick)="setCurrentModelAndSubmit(item)"
    >
      <div nz-row>
        <div nz-col nzFlex="0 0 40px">
          <label
            nz-checkbox
            [ngModel]="isModelSelected(item)"
            (ngModelChange)="setCurrentModel(item)"
          ></label>
        </div>
        <div nz-col nzFlex="1">{{ item.userName }}</div>
        <div nz-col nzFlex="1">{{ item.name }}</div>
        <div nz-col nzFlex="1">{{ item.email }}</div>
        <div nz-col nzFlex="1">{{ item.phoneNumber }}</div>
      </div>
    </nz-list-item>
  </nz-list>
</div>
<div nz-row nzJustify="end" class="form-pagination">
  <nz-pagination
    [(nzPageIndex)]="currentPage"
    [nzTotal]="totalCount"
    [(nzPageSize)]="listService.maxResultCount"
    [nzShowTotal]="paginationTotalTemplate"
  ></nz-pagination>
  <ng-template #paginationTotalTemplate let-total> 共 {{ total }} 条记录 </ng-template>
</div>

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="cancelForm()">取消</button>
  <button nz-button nzType="primary" (click)="submitForm()">确定</button>
</div>
